<template>
  <div class="DengLu">
    <div
      class="dengluTao"
      v-show="!$store.state.isPhone"
    >
      <div class="header">
        <div class="DL">
          <a
          href="javascript:;"
            class="LogIN"
          >登录</a>
        </div>
      </div>

      <div class="main">
        <div class="lync">
          <div class="login">
            <div class="cnt">
              <div class="main-top">
                <div class="f-cb">
                  <div class="phone">
                  </div>
                  <div class="right">
                    <div class="SMDL">扫码登录</div>
                    <div class="qr">

                      <div
                        class="canvas"
                        title="http://music.163.com/login?codekey=9292f8c3-80a5-4aa7-b486-6812e9afe81a"
                      >
                        <EWM></EWM>
                      </div>
                    </div>
                    <p class="txt">
                      使用&nbsp;<a href="https://music.163.com/#/download">网易云音乐APP</a>
                      &nbsp;扫码登录
                    </p>
                  </div>
                </div>
              </div>
              <div class="buttn">
                <a
                 href="javascript:;"
                  @click="QiTa"
                >选择其他登录方式</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <span
        class="TCdl"
        @click="TCdl"
        style="position: absolute;top:7px;right:20px;color:#999;z-index:100000;font-size:26px;cursor: pointer;"
      >×</span>
    </div>

    <div
      class="phoneLogin"
      v-show="$store.state.isPhone"
    >
      <PHONE></PHONE>
    </div>
    <div
      style="width:530px;height:314px;display:none;position: fixed;"
      class="ZDL"
    >
      <DL></DL>
    </div>
    <div
      style="width:530px;height:314px;display:none;"
      class="ZZC"
    >
      <ZC></ZC>
    </div>

  </div>
</template>
<script>
import EWM from './EWM/index'
import PHONE from './phone/index'
import DL from './DL/index'
import ZC from './ZC/index'
export default {
 data: () => ({
  //  isPhone:true
 }),
  created() {
    //  this.$store.commit('QiTa')
  },
  methods: {
    TCdl(){
       let dengLu=document.querySelector(".dengLu")
      dengLu.style.display="none"
    },
    QiTa(){
      this.$store.commit('QiTa')
      console.log("aaa")
    }
  },
  components:{
    EWM,
    PHONE,
    DL,
    ZC
  }
};
</script>
<style lang="less">
.DengLu{
    font-size: 12px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
  .dengluTao{
    width: 530px;
    height: 372px;
    border: 5px solid orange;
    position: fixed;
    z-index: 9998;
    width: 530px;
    border-radius: 4px;
    box-shadow: 0 5px 16px rgba(0,0,0,0.8);
    border: none;
  }
  .header{
    background: url('../../assets/cyzimgs/xuebitu13.png');
    position: relative;
    z-index: 10;
    border-bottom: 1px solid #191919;
    border-radius: 4px 4px 0 0;
    background: #2d2d2d;
      .DL{
        padding-right: 45px;
        margin: 0;
        height: 38px;
        line-height: 38px;
        padding-left: 18px;
        border-radius: 3px 3px 0 0;
        font-weight: bold;
        font-size: 14px;
        color: #fff;
        background-position: 50% 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        a{
          color:#fff;
        }
      }
      
  }
  .main{
    padding: 0;
    border: 1px solid #878787;
    border-width: 0 1px 1px;
    border-radius: 0 0 4px 4px;
    background: #fff;
      .lync{
          position: relative;
          zoom: 1;
          padding: 0;
          .login{
                min-height: 332px;
                .cnt{
                    margin: 0 auto;
                    padding: 38px 0 20px;
                    text-align: center;
                      .main-top{
                          position: relative;
                          margin: 0 auto;
                            .f-cb::after{
                              clear: both;
                              content: '.';
                              display: block;
                              height: 0;
                              visibility: hidden;
                              }
                        .phone{
                            background-color: red;
                              background: url('../../assets/cyzimgs/phone.png');
                            display: block;
                            float: left;
                            margin-left: 101px;
                            width: 125px;
                            height: 220px;
                            background-size: contain;
                                text-align: center;
                          }
                          .right{
                            float: left;
                            margin-left: 25px;
                            text-align: center;
                              .SMDL{
                                font-size: 18px;
                                font-weight: 500;
                                text-align: center;
                              }
                              .qr{
                                width: 130px;
                                height: 130px;
                                padding: 4px;
                                margin: 13px auto;
                                position: relative;    
                                background: #fff;
                                text-align: center;
                                  .canvas{
                                    pointer-events: none !important;
                                    display: block;
                                      canvas{
                                            pointer-events: none !important;
                                      }
                                  }
                              }
                              .txt{
                                font-size: 12px;
                                top: 190px;
                                width: 200px;
                                position: absolute;
                                left: 227px;
                                line-height: 17px;
                                color: rgba(0, 0, 0, 0.4);
                                text-align: center;
                                border: 0;
                                padding: 0;
                                margin: 0;
                                  a{
                                    cursor: pointer;
                                    color: #0c73c2;
                                  }
                                  a:hover{
                                    text-decoration: underline;
                                  }
                              }
                          }
                      }
                      .buttn{
                        height: 28px;
                        text-align: center;
                          a{
                            // background: url('../../assets/cyzimgs/xuebitu9.png');
                            display: block;
                            width: 118px;
                            height: 100%;
                            margin: 20px auto 0;
                            padding-right: 0;
                            font-size: 12px;
                            border: 1px solid #979797;
                            border-radius: 15px;
                            line-height: 28px;
                            text-align: center;
                            color: rgba(0,0,0,0.80);
                            text-decoration: none;
                            padding: 0 5px 0 0;
                            white-space: nowrap;
                            overflow: hidden;
                            vertical-align: top;
                            cursor: pointer;
                          }
                      }
                }
          }
      }
  }
  // .phoneLogin{
  //   width: 400px;
  //   height: 400px;
  //   background: red;
  // }
}
</style>